/*
    1：请求后台数据，渲染页面
        1.1. 获取数据
        1.2. 生成动态的结构，渲染页面
    2: 用户输入，英雄的名称，在面列表中显示，搜索的结果
        ：假如没有搜索到返回全部英雄
        2.1 给搜索按钮绑定事件
    3: 删除英雄
        3.1 给删除按钮，添加点击事件
        3.2 使用事件委托
        3.3 请求后端接口删除数据
        3.4 重新调用handelRender()方法重新渲染
    4： 添加英雄
        4.1 给添加的按钮绑定点击事件
        4.2 使用boostrap的模态框， 显示模态框( $('#myModal').modal('hide'))
        4.3 给模态框的确定按钮绑定事件
        4.4 请求后端服务器，添加英雄数据
        4.5 关闭模态框
    5: 上传文件
        5.1 给上传文件的按钮绑定点击事件
        5.2 获取file文件的数据
        5.3 使用 new FormData()这个对象处理，file文件
        5.4 请求后端服务器上传图片
*/

$(function () {
    handelRender();
    // 1.1.1 封装一个方法用来获取英雄数据和渲染页面
    function handelRender(heroName) {
        // 1.1.2发请求拿数据
        $.get('http://127.0.0.1:3001/getHeroList', {
            heroName
        }, res => {
            // 1.1.3 拿到数据，进行页面的渲染
            let str = '';
            // 1.1.4 遍历数据，结构和字符串的拼接
            res.data.forEach(item => {
                str +=
                    `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.gender}</td>
                        <td><img src="${item.img}" alt=""></td>
                        <td>
                            <button id="addImgBtn" class="btn btn-warning res">上传头像<input class="abs" type="file" id="file" data-id=${item.id} /></button>
                            <button class="btn btn-danger delBtn" data-id=${item.id}>删除</button>
                        </td>
                    </tr>
                `
            })
            // 1.1.5 渲染页面
            $('#main-tbl tbody').html(str);
        })
    }

    // 2.1.1 给搜索按钮添加点击事件
    $('.search').click(function () {
        // 2.1.2 获取用户输入的值
        const heroName = $.trim($('.inputForm').val());
        handelRender(heroName);
    })

    // 3.1 给删除按钮，添加点击事件
    $('#main-tbl tbody').on('click', '.delBtn', function (res) {
        // 3.1.1 判断是否真的删除此项
        if (confirm("您确定要删除此个英雄吗?")) {
            // 3.2.1 获取传递过来的参数
            const id = $(this).data('id');
            // console.log(id);
            // 3.3 请求后端接口删除数据
            $.get('http://127.0.0.1:3001/delHeroById', {
                id
            }, res => {
                if (res.code == 200) {
                    // 删除成功，重新调用handelRender()函数
                    handelRender();
                }
            })
        }
    })


    //  4.1 给添加的按钮绑定点击事件
    $('#myModalLabel').click(function () {
        // 4.2 使用boostrap的模态框， 显示模态框($('#myModal').modal('hide'))
        $('#myModal').modal('show');
    })
    // 4.3 给模态框的确定按钮绑定事件
    $('#submitBtn').click(function () {
        // 4.3.1 获取用户输入的值
        const name = $.trim($('#hero_name').val());
        // console.log(name)
        // 4.3.2 获取用户选择的值
        const gender = $('#selectGender').val();
        // console.log(gender)
        // 4.3.3 判断用户输入的值是否为空
        if (name != '') {
            // 4.4.1 发送请求
            $.post('http://127.0.0.1:3001/addHero', {
                name,
                gender,
                img: ''
            }, res => {
                // 4.4.2 假如成功
                if (res.code == 200) {
                    // 4.4.3 关闭模态框，调用handelRender()这个函数渲染页面
                    // 4.4 请求后端服务器， 添加英雄数据

                    // 4.5 关闭模态框
                    $('#myModal').modal('hide');
                    handelRender();
                    $('#hero_name').val('');
                    $('#selectGender').val('男');
                }
            })
        }
    })

    // 5.1 给上传文件的按钮绑定点击事件,需要事件委托
    $('#main-tbl tbody').on('change', '#file', function (res) {
        // 5.2 获取file文件的数据
        // console.log(this.files[0])
        // 5.3 使用 new FormData() 这个对象处理， file文件
        const formdata = new FormData();
        formdata.append('file_data', this.files[0]);
        // 5.4 请求后端服务器上传图片
        // 5.5 注意： 1.这里需要使用 $.ajax() 2. 需要配置参数 contentType: false,processData:false
        $.ajax({
            url: 'http://127.0.0.1:3001/uploadFile',
            type: 'post',
            data: formdata,
            contentType: false,
            processData: false,
            success: res => {
                //5.6 上传成功，请求修改英雄信息的接口，修改信息
                $.post('http://127.0.0.1:3001/updateHero', {
                    id: $(this).data('id'),
                    img: res.src
                }, function (result) {
                    // 5.7 数据更新成功，重新调用handelRender()
                    if (result.code == 200) {
                        handelRender();
                    }
                })
            }
        })
    })






})